<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>HeatmapComponent minimal example</title>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">

    <!-- HeatmapComponent script and style -->
    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/heatmap-component@latest/build/heatmap-component.css" /> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/heatmap-component@latest/build/heatmap-component.js"></script> -->

    <!-- Alternative URLs (local build): -->
    <link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
    <script src="../build/heatmap-component.js"></script>
</head>

<body>
    <!-- Heatmap will be placed here: -->
    <div id="app" style="width: 500px; height: 300px; border: solid gainsboro 1px;"></div>

    <script>
        // Define data
        const data = {
            xDomain: [1, 2, 3, 4], // "names of columns"
            yDomain: ['A', 'B', 'C'], // "names of rows"
            data: [
                { col: 1, row: 'A', score: 0.0 },
                { col: 1, row: 'B', score: 0.2 },
                { col: 1, row: 'C', score: 0.4 },
                { col: 2, row: 'A', score: 0.6 },
                { col: 2, row: 'B', score: 0.8 },
                { col: 2, row: 'C', score: 1.0 },
                { col: 3, row: 'A', score: 0.3 },
                { col: 3, row: 'C', score: 0.7 },
                { col: 4, row: 'B', score: 0.5 },
            ],
            x: d => d.col, // function that takes a datum and returns column name
            y: d => d.row, // function that takes a datum and returns row name
        };

        // Create and customize a heatmap instance
        const heatmap = HeatmapComponent.Heatmap.create(data, 0);
        const colorScale = HeatmapComponent.ColorScale.continuous('YlOrRd', [0, 1]); // yellow-orange-red color scale for values from 0 to 1
        heatmap.setColor(d => colorScale(d.score)); // function that takes a datum and returns color

        // Render in div with id="app"
        heatmap.render('app');

        heatmap.events.select.subscribe(e => console.log('Selected', e));

    </script>
</body>

</html>